<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Vendor CSS Files -->

    
    <!-- Template Main CSS File -->
    <link href="style.css" rel="stylesheet">

    <link rel="stylesheet" href="text.css">
    
</head>
<body>
    <div class="nave">
        <ul class="navelist">
            <li><a href="首页.html">首页</a><li>
            <li><a href="著名人物.html">著名人物</a></li>    
            <li><a href="旅游景点.html">旅游景点</a></li>    
            <li><a href="成都美食.html">成都美食</a></li>    
            <li><a href="历史文化.html">历史文化</a></li>
            <li><a href="登录.html">登录</a></li>
        </ul>
    </div>
</html>
<main id="main">
    <section id="login" class="login">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div id="second">
                        <h1>账户登录</h1>

                        <form id="myform">

                            <label>用户名:</label>
                            <input name="name" id="name" type="text" placeholder="请输入用户名">
                            <label class="bitan">*</label>
                            <br>
                            <label id="warn-name">请输入用户名</label>
                            <br id="br-1">
                            <label>密&nbsp&nbsp&nbsp&nbsp码:</label>
                            <input name="pwd" id="pwd" class="input-2" type="password" placeholder="请输入密码">
                            <label class="bitan">*</label>
                            <br>
                            <label id="warn-pwd">密码不能为空</label>
                            <br id="br-2">
                            <label>确&nbsp&nbsp&nbsp&nbsp认:</label>
                            <input name="repwd" id="repwd" class="input-2" type="password" placeholder="请再次输入密码">
                            <label class="bitan">*</label>
                            <br>
                            <label id="warn-repwd">再次输入密码不能为空</label>
                            <br id="br-3">
                            <input type="submit" value="登录"  id="loginbt" name="">

                        </form>
                    </div>

                </div>
            </div>
        </div>

    </section>

</main>






<a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>

<script>
    $(function () {
        //定义变量
        var flagUser=false
        var flagPwd=false
        var flagCpwd=false

        var $username=$('#name')
        var $userpwd=$('#pwd')
        var $userrepwd=$('#repwd')
        var $userem=$('#em')
        var $usersf=$('#sf')
        var $usernb=$('#nb')
        var $submit=$('#myform')

        $username.blur(function () {
            // 封装函数 调用函数
            fnCheckUser()
        })
        function fnCheckUser() {
            // // 获取用户输入的数据
            var vals = $username.val()
            // // 正则，正则验证用户输入的数据是否合法
            var re = /^\w{6,18}$/
            //
            if (vals == '') {
                $("#warn-name").text("用户名不能为空")
                $("#warn-name").css("margin-left","5px");
                $("#warn-name").css("display","inline");
                $("#br-1").css("display","inline");
                flagUser=false
                return
            }else{
                $("#warn-name").css("display","none");
                $("#br-1").css("display","none");
                flagUser=true
            }
            if (re.test(vals)){
                $("#warn-name").css("display","none");
                $("#br-1").css("display","none");
                flagUser=true
            }else{
                $("#warn-name").text("用户名是6-18位数字、字母和下划线！")
                $("#warn-name").css("margin-left","155px");
                $("#warn-name").css("display","inline");
                $("#br-1").css("display","inline");
                flagUser=false
            }
        }

        $userpwd.blur(function () {
            // 封装函数 调用函数
            fnCheckPwd()
        })
        function fnCheckPwd() {
            // // 获取用户输入的数据
            var vals = $userpwd.val()
            // // 正则，正则验证用户输入的数据是否合法
            var re = /^\w{6,18}$/
            //
            if (vals == '') {
                $("#warn-pwd").text("密码不能为空")
                $("#warn-pwd").css("margin-left","-15px");
                $("#warn-pwd").css("display","inline");
                $("#br-2").css("display","inline");
                flagPwd=false
                return
            }else{
                $("#warn-pwd").css("display","none");
                $("#br-2").css("display","none");
                flagPwd=true
            }
            if (re.test(vals)){
                $("#warn-pwd").css("display","none");
                $("#br-2").css("display","none");
                flagPwd=true
            }else{
                $("#warn-pwd").text("密码是6-20位数字、字母和下划线！")
                $("#warn-pwd").css("margin-left","145px");
                $("#warn-pwd").css("display","inline");
                $("#br-2").css("display","inline");
                flagPwd=false
            }
        }

        $userrepwd.blur(function () {
            // 封装函数 调用函数
            fnCheckRePwd()
        })
        function fnCheckRePwd() {
            // // 获取用户输入的数据
            var vals = $userrepwd.val()
            var vals2 = $userpwd.val()
            // // 正则，正则验证用户输入的数据是否合法
            var re = /^\w{6,18}$/
            //
            if (vals == '') {
                $("#warn-repwd").css("display","inline");
                $("#br-3").css("display","inline");
                flagCpwd=false
                return
            }else{
                $("#warn-repwd").css("display","none");
                $("#br-3").css("display","none");
                flagCpwd=true
            }
            if (re.test(vals)){
                $("#warn-repwd").css("display","none");
                $("#br-3").css("display","none");
                flagCpwd=true
            }
            if (vals==vals2){
                $("#warn-repwd").css("display","none");
                $("#br-3").css("display","none");
                flagCpwd=true
            }else {
                $("#warn-repwd").text("两次输入密码不一致")
                $("#warn-repwd").css("margin-left","30px");
                $("#warn-repwd").css("display","inline");
                $("#br-3").css("display","inline");
                flagCpwd=false
            }
        }


        $submit.submit(function () {
            console.log("form执行")
            if (flagCpwd&&flagPwd&&flagUser){
                alert("登录成功!")
            }
            else{
                alert("登录失败！")
                return false
            }
        })
    });
</script>
</body>
</html>